<!--
 * @Author: dazy dazy916@126.com
 * @Date: 2025-09-18 11:37:49
 * @LastEditors: dazy916 dazy916@126.com
 * @LastEditTime: 2025-09-21 19:32:20
 * @FilePath: \H5\src\pages\login.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import { reactive, ref, onMounted, getCurrentInstance } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import WebSocket from '@/components/websocket.vue'
import { useChatStore } from '@/store'
const { proxy: { $http } } = getCurrentInstance()
const store = useChatStore()

const route = useRoute()
const router = useRouter()
const dataVal = reactive({})
const show = ref(true)
const studentNumber = ref(null)
const showIndex = ref(false)
const selectType = (val) => {
    store.studentNumber = studentNumber.value
    sessionStorage.setItem('studentNumber', studentNumber.value)
    studentNumber.value = sessionStorage.getItem('studentNumber')
    showIndex.value = true
    // router.push('studentOne')
}
//开始教学按钮
const startTeaching = () => {
    router.push({ path: 'studentOne' })
}
onMounted(() => {
    showIndex.value = sessionStorage.getItem('studentNumber')
})
</script>
<template>
    <!-- <van-dialog v-model:show="show" title="设置" show-cancel-button @confirm="selectType" >
        <van-field v-model="studentNumber" label="请设置当前设备序号" type="digit" />
    </van-dialog> -->
    <main :class="['main-content', showIndex ? 'showIndex' : '']">
        <div class="book-card d-flex align-items-center justify-content-center direction-column" v-if="!showIndex">
            <img src="@/assets/img/logo.png" alt="" class="logo">
            <div class="tips mt-4">请设置当前设备序号</div>
            <div class="d-flex direction-column mt-4">
                <van-field v-model="studentNumber" label="" type="digit" class="book-card-input mb-2" />
                <van-button block color="#E95294" class="mb-4" @click="selectType">确认</van-button>
            </div>
        </div>
        <WebSocket />
    </main>

</template>
<style scoped lang='scss'>
.main-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-image: url('@/assets/img/student-index-bg.png');
    background-repeat: no-repeat;
    background-size: cover;

    &.showIndex {
        background-image: url('@/assets/img/student-index-bg1.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
    }

    .book-card {
        width: 600px;
        height: 450px;
        border-radius: 20px;
        padding: 60px;
        background-color: rgba(255, 255, 255, 0.8);

        .logo {
            width: 480px;
            height: 80px;
        }

        .tips {
            font-size: 24px;
            font-weight: 400;
            color: #333333;
        }

        .book-card-input {
            width: 360px;
            height: 60px;
            border-radius: 10px;
        }
    }
}
</style>